import { View } from '@tarojs/components';
import { CBlockCustom, CDescriptionsCustom } from '@vh-mobile/pro-components';
import './index.less';
import MainContainerCustom from '@/components/MainContainerCustom';
import { pxTransform } from '@tarojs/taro';

export default () => {
  const data: any = {
    status: '未到访',
    name: '张晓明',
    phone: ['18767890989', '18767890981'],
    date: '2023-10-23',
    desc: '描述的张描述的张小莫描述的张小莫描述的张小莫描述的张小莫描述的张小莫描述的张小莫小莫',
    image: [
      'https://img.js.design/assets/img/6544b6474d5af385801fa00b.jpg',
      'https://img.js.design/assets/img/6544b6474d5af385801fa00b.jpg',
    ],
    image1: 'https://img.js.design/assets/img/6544b6474d5af385801fa00b.jpg',
    link: 'https://img.js.design/assets/img/6544b6474d5af385801fa00b.jpg',
  };

  const data1: any = {
    id: '32',
    type: 1,
    userId: '6',
    projectId: '950287792888xxxxx',
    isBlack: false,
    sort: 1,
    lastDistributeTime: '2024-05-22 14:03:56',
    name: '周大仙',
    mobile: '178xxxxx731',
    wxHeadUrl:
      'https://zh-market.oss-cn-shenzhen.aliyuncs.com/dev/user/950599266760814592_avatarUrl.jpeg',
    workPermitUrl: null,
    simpleInfo:
      '描述的张描述的张小莫描述的张小莫描述的张小莫描述的张小莫描述的张小莫描述的张小莫小莫描述的张描述的张小莫描述的张小莫描述的张小莫描述的张小莫描述的张小莫描述的张小莫小莫',
    projectName: '测试项目111111aaaaaaaaaaaa',
    distributeCustomer: '开放',
    employeeIdentity: '正合员工',
    wxAgentEntryTime: '2024-05-22 09:40:29',
  };

  const onClick = (item: any, value: any) => {
    console.log('===================');
    console.log(item, value);
    console.log('===================');
  };
  return (
    <MainContainerCustom>
      <View style={{ minHeight: '100vh', backgroundColor: '#fff', padding: '10px' }}>
        <CBlockCustom title="普通">
          <CDescriptionsCustom
            onClick={onClick}
            data={data}
            // emptyHide
            columns={[
              {
                title: '状态',
                dataIndex: 'group',
                valueType: 'group',
                tooltip: 'xxxxxxxxxx',
              },
              {
                title: '到访状态到访状态',
                dataIndex: 'status',
                valueType: 'text',
                prefix: true,
                titleStyle: { width: pxTransform(400) },
              },
              {
                title: '基本信息',
                dataIndex: 'group',
                valueType: 'group',
                prefix: true,
              },
              {
                title: '姓名',
                dataIndex: 'name',
                valueType: 'text',
                tooltip: 'xxxxxxxxxx',
              },
              {
                title: '电话',
                dataIndex: 'phone',
                valueType: 'text',
              },
              {
                title: '生日',
                dataIndex: 'date',
                valueType: 'text',
              },
              {
                title: '媒体信息',
                dataIndex: 'group',
                valueType: 'group',
              },
              {
                title: '照片',
                dataIndex: 'image',
                valueType: 'image',
              },
              {
                title: '头像',
                dataIndex: 'image1',
                valueType: 'image',
              },
              {
                title: '主页',
                dataIndex: 'link',
                linkProps: {
                  text: '跳转',
                },
                valueType: 'link',
              },
              {
                title: '简介',
                dataIndex: 'desc',
                valueType: 'text',
                wrap: true,
              },
              {
                title: '隐藏',
                dataIndex: 'desc1111',
                valueType: 'text',
                emptyHide: true,
                wrap: true,
              },
            ]}
          />
        </CBlockCustom>

        <CBlockCustom title="自定义">
          <CDescriptionsCustom
            data={data}
            columns={[
              {
                title: (item: any) => {
                  console.log(item);
                  return <View>到访状态1</View>;
                },
                valueRender: (item: any, value: any) => {
                  console.log(item, value);
                  return <View>{value}</View>;
                },
                dataIndex: 'status',
                valueType: 'text',
              },
            ]}
          />
        </CBlockCustom>

        <CBlockCustom title="多风格">
          <CDescriptionsCustom
            data={data1}
            columns={[
              {
                title: '',
                dataIndex: 'wxHeadUrl',
                valueType: 'image',
                className: 'wxHeadUrl',
              },
              {
                title: '关联项目',
                dataIndex: 'projectName',
                valueType: 'text',
                width: '50%',
              },
              {
                title: '置顾姓名',
                dataIndex: 'name',
                valueType: 'text',
                width: '50%',
              },
              {
                title: '置顾电话',
                dataIndex: 'mobile',
                valueType: 'text',
                width: '50%',
              },
              {
                title: '分配客户',
                dataIndex: 'distributeCustomer',
                valueType: 'text',
                width: '50%',
              },
              {
                title: '身份识别',
                dataIndex: 'employeeIdentity',
                valueType: 'text',
                width: '50%',
              },
              {
                title: '排序',
                dataIndex: 'sort',
                valueType: 'text',
                width: '50%',
              },
              {
                title: '入驻时间',
                dataIndex: 'wxAgentEntryTime',
                valueType: 'text',
                width: '100%',
              },
              {
                title: '工牌',
                dataIndex: 'workPermitUrl',
                valueType: 'image',
              },
              {
                title: '简介',
                dataIndex: 'simpleInfo',
                valueType: 'text',
                wrap: true,
              },
            ]}
          />
        </CBlockCustom>
      </View>
    </MainContainerCustom>
  );
};
